<template>
  <!-- 添加商品弹框组件 -->
  <view class="add-goods-popup">
    <view class="title flex flex-ai-c flex-jc-sb">
      <view class="width-20" @click="resetList()">
        <i-icon icon="iconlajitong" size="30rpx" color="#999"></i-icon>
        <text class="font-24 color-999 ml-10">清空</text>
      </view>
      <text class="title-content">添加商品</text>
      <view class="width-20 btn-close">
        <i-icon
          icon="iconfabu-cha"
          size="40rpx"
          color="#999"
          @click.native="close()"
        ></i-icon>
      </view>
    </view>

    <!-- 添加商品表单 -->
    <scroll-view scroll-y class="form-list" :style="{ height: listHeight }">
      <view v-for="(item, i) in goodsList" :key="i" class="form-box">
        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">商品名</text>
          <input
            type="text"
            v-model="item.goods_Name"
            placeholder="请选择或输入商品名称"
            :data-ph="i"
            :placeholder-class="focusIndex.goodsName === i ? 'ph-hide' : ''"
            @focus="handlePlaceholderHide($event, i, 'focus', 'goodsName')"
            @blur="handlePlaceholderHide($event, i, 'blur', 'goodsName')"
          />
          <view class="flex flex-ai-c" v-if="!item.goods_Name">
            <text class="font-28 color-999">|</text>
            <view @click="goSelectGoods()">
              <text class="color-FBB000 font-24 ml-20 mr-20">选择商品</text>
              <u-icon name="arrow-right" size="24rpx" color="#FBB000"></u-icon>
            </view>
          </view>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">进货价</text>
          <input
            type="number"
            v-model="item.in_Price"
            placeholder="请输入商品进货价"
            @input="priceChange($event, item, 'inPrice')"
            :data-ph="i"
            :placeholder-class="focusIndex.inPrice === i ? 'ph-hide' : ''"
            @focus="handlePlaceholderHide($event, i, 'focus', 'inPrice')"
            @blur="handlePlaceholderHide($event, i, 'blur', 'inPrice')"
          />
          <text>元</text>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">销售价</text>
          <input
            type="number"
            v-model="item.sale_Price"
            placeholder="请输入销售价"
            :data-ph="i"
            @input="priceChange($event, item, 'salePrice')"
            @focus="handlePlaceholderHide($event, item, 'focus', 'salePrice')"
            @blur="handlePlaceholderHide($event, item, 'blur', 'salePrice')"
          />
          <text>元</text>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">加价率</text>
          <input
            type="number"
            v-model="item.added_Rate"
            placeholder="请输入商品加价率"
            @input="priceChange($event, item, 'addRate')"
            :data-ph="i"
            :placeholder-class="focusIndex.addRate === i ? 'ph-hide' : ''"
            @focus="handlePlaceholderHide($event, item, 'focus', 'addRate')"
            @blur="handlePlaceholderHide($event, item, 'blur', 'addRate')"
          />
          <text>%</text>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">数量</text>
          <view class="num-box flex flex-ai-c">
            <text class="btn" @click="less(item)">-</text>
            <input type="number" v-model="item.amount" class="cont" />
            <text class="btn" @click="add(item)">+</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 按钮 -->
    <view class="btn-box flex flex-ai-c">
      <view class="btn" @click="confirm(false)"
        ><i-button
          text="继续添加"
          bg-color="#333"
          color="#FFE23E"
          shape="circleLeft"
        ></i-button
      ></view>
      <view class="btn" @click="confirm(true)"
        ><i-button text="确定" color="#333" shape="circleRight"></i-button
      ></view>
    </view>
  </view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'

export default {
  name: 'addGoodsPopup',
  components: { iButton },

  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      formData: {
        name: '',
        entryPrice: '',
        markup: '',
        price: '',
        amount: 1,
      },

      // 输入框获取焦点
      focusIndex: {
        goodsName: -1,
        inPrice: -1,
        addRate: -1,
        salePrice: -1,
      },
    }
  },

  computed: {
    // 商品服务列表
    goodsList() {
      return this.$store.state.afterSales.checkedServeList
    },

    // 中间商品列表的区域滚动高度
    listHeight() {
      let h = this.goodsList.length > 1 ? '980rpx' : '680rpx'
      return h
    },
  },

  methods: {
    // 减
    less(item) {
      if (item.amount === 1) return
      item.amount -= 1
    },

    // 加
    add(item) {
      item.amount += 1
    },

    // 确定
    confirm(type) {
      // type为true：确定，type为false: 继续添加
      if (type) {
        let flag = [false, false, false,false]
				let flag1 = false,index = 0;
        this.goodsList.map((item,i) => {
          if (!item.goods_Name) {
            flag[0] = true
          }
          if (!item.in_Price) {
            flag[1] = true
          }
					if (!(item.sale_Price + '')) {
					  flag[2] = true
					}
          if (!(item.added_Rate + '')) {
            flag[3] = true
          }
        })
        if (flag.includes(true)) {
          let tips = ['请输入商品名称', '请输入进货价','请输入销售价', '请输入加价率']
          uni.showToast({
            title: tips[flag.indexOf(true)],
            icon: 'none',
          })
          return false
        }
        this.$emit('change', {
          type,
          data: this.goodsList,
        })

        // 初始化弹窗数据
        this.$store.commit('afterSales/setCheckedServeList', [
          {
            goods_Name: '',
            in_Price: '',
            added_Rate: '',
            sale_Price: '',
            amount: 1,
          },
        ])
      } else {
        this.goSelectGoods()
      }
    },

    // 清空
    resetList() {
      uni.showModal({
        title: '提示',
        content: '确认清空列表吗？',
        confirmColor: '#FBB000',
        success: (res) => {
          if (res.confirm) {
            // 初始化弹窗数据
            this.$store.commit('afterSales/setCheckedServeList', [
              {
                goods_Name: '',
                in_Price: '',
                added_Rate: '',
                sale_Price: '',
                amount: 1,
              },
            ])
          }
        },
      })
    },

    // 跳转选择商品页
    goSelectGoods() {
      uni.navigateTo({
        url: '/pages_afterSales/selectOrderType/selectOrderType',
      })
    },

    // 监听进货价输入
    priceChange(e, data, type) {
      if (type === 'addRate') {
        let sum = 0
        if (data.in_Price && data.added_Rate + '') {
          let m = data.added_Rate / 100 // 加价率
          let ep = parseFloat(data.in_Price)
          sum = Math.round((ep * m + ep) * 100) / 100 // 进货价*加价率+进货价
        }
        data.sale_Price = sum || ''
      } else {
        let m = 0
        if (data.in_Price && data.sale_Price + '') {
          let sum = parseFloat(data.sale_Price) // 加价率
          let ep = parseFloat(data.in_Price)
          m = Math.round(((sum - ep) / ep) * 10000) / 100
        }
        data.added_Rate = m || 0
      }
    },

    // 关闭弹窗
    close() {
      this.$emit('update:show', false)
    },

    // 处理输入框Placeholder获取焦点就隐藏
    handlePlaceholderHide(e, item, type, key) {
      // console.log(e)
      if (type === 'focus') {
        this.focusIndex[key] = parseInt(e.target.dataset.ph)
      } else {
        this.focusIndex[key] = -1
				
				if(item.sale_Price && Number(item.sale_Price) < Number(item.in_Price)){
					uni.showToast({
					  title: '销售价不能低于进货价，请重新输入',
					  icon: 'none',
					})
					item.sale_Price = ''
					item.added_Rate = ''
				}
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.add-goods-popup {
  min-height: 394rpx;
  max-height: 1100rpx;

  .title {
    height: 106rpx;
    line-height: 106rpx;
    color: #333;
    background-color: #fff;
    font-size: 32rpx;
    text-align: center;

    .title-content {
      flex: 1;
    }

    .btn-close {
      padding: 0 26rpx;
      text-align: right;
    }
  }
}

// 表单
.form-list {
  padding: 0 24rpx 140rpx;
}
.form-box {
  padding: 0 24rpx;
  border: 1px solid #e1e1e1;
  border-radius: 30rpx;

  & + .form-box {
    margin-top: 34rpx;
  }

  .item {
    padding: 33rpx 0;

    & + .item {
      border-top: 1px solid #eee;
    }

    > input {
      flex: 1;
      padding: 0 50rpx;
      font-size: 28rpx;
    }

    // 计数器
    .num-box {
      .btn {
        width: 48rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 48rpx;
        color: #999;
      }
      .cont {
        width: 48rpx;
        height: 48rpx;
        margin: 0 16rpx;
        background-color: #eeeeee;
        border-radius: 10rpx;
        text-align: center;
      }
    }

    & /deep/ .ph-hide {
      font-size: 0;
    }
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  padding: 0 24rpx;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}
</style>
